<template>
	<u-select v-model="modal" :confirm-color="confirmColor" :check-default="refresh" :default-value="defaultValue"
		:list="list" mode="mutil-column-auto" confirm-text="确认" cancel-text=" " @confirm="confirm"
		@columnChange="columnChange">

		<view class="citySearchInput">
			<view class="search">
				<view class="search-box">
					<u-search ref="citySearch" :placeholder="$t('城市信息(默认不限)')" v-model="searchText" shape="square"
						:show-action="false" @search="searchCity" style="width: 90%;"></u-search>
					<view style="white-space: nowrap;padding: 0 30rpx;" @click="searchCity">
						{{$t("搜索")}}

					</view>
				</view>
				<view class="result" style="display: block;height: 135px;overflow-y: scroll;width: 100%;"
					v-if="searchResult && searchResult.length>0">
					<block v-for="(it,ind) in searchResult" :key="ind">
						<view class="result_text">
							{{it.map(item=>item[$t('item.name')]).join(",")}}
							<u-button style="margin-left: 30px;" type="success" size="mini"
								@click="searchConfirm(it)">{{$t("确认")}}</u-button>
						</view>
					</block>
				</view>
			</view>
			<!-- <view class="select-head">
				<view @tap="confirm">确认</view>
			</view> -->
		</view>
	</u-select>
</template>

<script>
	import {
		COUNTRY
	} from '@/config/app';
	export default {
		options: {
			styleIsolation: 'shared'
		},
		props: {
			value: {
				type: Boolean,
				default: false,
			},
			is_port: {
				type: Boolean,
				default: false,
			},
			select_city_new: {
				type: [Array, Object, null],
				required: false,
				default () {
					return [
						// 初始化对象的属性，确保是有效的默认值
					];
				}
			},
			select_city_newd: {
				type: [Array, Object, null],
				required: false,
				default () {
					return [
						// 初始化对象的属性，确保是有效的默认值
					];
				}
			},
			is_register: {
				type: Number,
				default: 0,
			}
		},
		watch: {
			value(val) {
				this.modal = val
			},
			select_city_new: {
				immediate: true,
				handler(newData) {
					// 通知grandchild数据更新
					if (newData && newData[1]) {
						this.list = newData[1]
						this.country_select = newData[0]
						this.defaultValue = [0, 0, 0]
					}
				}
			},
			select_city_newd: {
				immediate: true,

				handler(newData) {
					// 通知grandchild数据更新
					if (newData && newData[1]) {
						this.list = newData[1]
						this.country_select = newData[0]
						this.defaultValue = [0, 0, 0]
					}
				}
			},
			modal(val) {
				if (!val) {
					this.$emit("input", val)
					// this.searchResult = [];
					// this.searchText = '';
				}
			}
		},
		data() {
			return {
				modal: false,
				lang: getApp().globalData.lang,
				list: COUNTRY,
				confirmColor: '#2979ff',
				country: "0",
				country_select: '',
				defaultValue: [0, 0, 0],
				searchText: '',
				refresh: 0,
				searchResult: [], //自定义搜索的结果
				selectResult: [], //select组件滑动结果
			}
		},
		mounted() {
			this.getList()
			uni.onKeyboardHeightChange(res => {
				console.log(res.height)
			})
		},
		methods: {
			/* 列发生改变 */
			columnChange(e) {
				const {
					detail: {
						value: [a, b, c]
					}
				} = e;

				const guo = this.list[a];
				const sheng = guo.children[b]
				const city = sheng.children[c]
				this.selectResult = [{
						label: guo.label,
						value: guo.value
					},
					{
						label: sheng.label,
						value: sheng.value
					},
					{
						label: city.label,
						value: city.value
					}
				]
				this.defaultValue = [a, b, c]
			},

			getList() {
				const that = this
				if (that.lang != 'zh') {
					that.country = 1
				}

				if (that.is_port) {

					var params = {
						country: that.country,
						pid: 0,
						is_port: that.is_port,
						lang: that.lang
					}

					that.$u.api.basic.getSelectCityList(params).then(res => {
						that.list = res
					}).catch(err => {})


				} else {

					var params = {
						country: that.country,
						pid: 0,
						lang: that.lang
					}

					that.$u.api.basic.getSelectCityList(params).then(res => {
						that.list = res
					}).catch(err => {})

				}

			},
			// select确认
			confirm(e) {
				this.modal = false;
				this.$emit('change', this.selectResult)
			},
			// 文本框搜索
			searchCity(e) {
				// this.defaultValue = [0, 0, 0]
				const that = this
				if (!that.searchText) {
					return;
				}
				var country = 0;
				// if(that.lang!='zh'){
				// 	country = 1
				// }

				if (that.country_select) {
					if (that.country_select <= 1) {
						country = that.country_select
					}
				}
				let params = {
					name: this.searchText,
					country: country,
					lang: that.lang,
					is_register: that.is_register
				};

				if (that.is_port) {
					params = {
						name: this.searchText,
						country: country,
						is_port: that.is_port,
						lang: that.lang,
						is_register: that.is_register
					};
				}



				this.$u.api.basic.getSearchCity(params).then(res => {
					if (!res) {
						this.$u.toast(this.$t('未查询到数据'))
						return
					}
					this.searchResult = res;

					const c = this.list.filter((item, index) => {
						if (item.value == res[0].id) {
							this.defaultValue[0] = index;
							this.refresh++
							return true
						} else {
							return false
						}
					})[0];
					const s = c?.children.filter((item, index) => {
						if (item.value == res[1].id) {
							this.defaultValue[1] = index;
							this.refresh++
							return true
						} else {
							return false
						}
					})[0];
					const b = s?.children.filter((item, index) => {
						if (item.value == res[2].id) {
							setTimeout(() => {
								this.defaultValue[2] = index;
								this.refresh++
							}, 10)
							return true
						} else {
							return false
						}
					})[0];
				})
			},
			// 文本框搜索 确认结果
			searchConfirm(it) {
				let result = [];
				if (it.length > 0) {
					result = it.map(item => {
						return {
							label: item[this.$t("item.name")],
							value: item.id
						}
					})
				}
				this.modal = false;
				this.$emit('change', result)
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-drawer-bottom {
		max-height: 80vh !important;
		position: fixed !important;
	}

	::v-deep .u-drawer-content {
		max-height: 80vh !important;
		position: fixed !important;
	}

	::v-deep .u-select__header {
		position: absolute;
		width: 100%;
		// top: 35vh;
		bottom: 1vh;
		z-index: 9999;
		width: 50%;
		margin: 0 auto;
		left: 0;
		right: 0;

		.u-select__header__confirm.u-select__header__btn {
			width: 100%;
			text-align: center;
			height: 60rpx;
			line-height: 60rpx;
			background-color: rgb(41, 121, 255);
			color: #fff !important;
			border-radius: 30rpx;
		}
	}

	.citySearchInput {
		// margin: 0 auto;
		// width: 90%;
		// margin-bottom: 10vh;
		width: 100%;
		max-height: 30vh;
		position: relative;

		.search {
			// display: flex;
			// justify-content: center;
			padding: 30rpx;

			.result {
				display: flex;
				align-items: center;
				margin-top: 30rpx;

				&_text {
					margin-right: 30rpx;
				}
			}
		}

		.select-head {
			position: absolute;
			bottom: 0;
			// right: 30rpx;
			width: 100%;
			display: flex;
			justify-content: flex-end;
			padding: 30rpx 100rpx 0 0;
			border-top: 1px solid #f0f0f0;
			color: blue;
		}
	}

	.result_text {
		width: 100%;
		display: flex;
	}

	.search-box {
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #f2f2f2;
	}
</style>